<style lang="less" scoped>
  @import "./common.less";
</style>
<template>
  <div>
    <Card title="导出EXCEL">
      <Row>
        <Button icon="md-download" :loading="exportLoading" @click="exportExcel">导出文件</Button>
      </Row>
    </Card>
    <Row class="margin-top-10">
      <Table :columns="tableTitle" :data="tableData"></Table>
    </Row>
  </div>
</template>
<script>
  export default {
    name: 'export-excel',
    data () {
      return {
        exportLoading: false,
        tableTitle: [
          {
            title: '一级分类',
            key: 'category1'
          },
          {
            title: '二级分类',
            key: 'category2'
          },
          {
            title: '三级分类',
            key: 'category3'
          }
        ],
        tableData: [
          {
            category1: 1,
            category2: 2,
            category3: 3
          },
          {
            category1: 4,
            category2: 5,
            category3: 6
          },
          {
            category1: 7,
            category2: 8,
            category3: 9
          }
        ]
      }
    },
    methods: {
      exportExcel () {
        if (this.tableData.length) {
          this.exportLoading = true
          import('@/libs/excel').then(excel => {
            const params = {
              title: ['一级分类', '二级分类', '三级分类'],
              key: ['category1', 'category2', 'category3'],
              data: this.tableData,
              autoWidth: true,
              filename: '分类列表'
            }
            excel.export_array_to_excel(params)
            this.exportLoading = false
          })
        } else {
          this.$Message.info('表格数据不能为空！')
        }
      }
    },
    created () {

    },
    mounted () {

    }
  }
</script>
